<template>
  <div class="home" :style="{marginBottom:isAndroid?'100px':'128px'}">

    <!-- 头部 -->
    <div class="head-background">
      <div class="head">

        <div class="user-info-card flex">
          <div class="user-info-general">
            <span class="info-title">Today</span> <br>{{ day }} <br>
            <span class="info-title">今日喝水</span><br>{{ Math.floor(user.drinkingWater) }}ml <br>
          </div>
          <div class="additional">
            <img
                src="https://tva1.sinaimg.cn/large/0081Kckwgy1gkdj64e2scj30p00oy4qp.jpg"
                alt=""
                class="profile-image-user"
            />
            <div class="level">
              level: {{ user.level }}
            </div>
          </div>

        </div>


        <!-- h -->
        <div class="tab-types flex">

          <div v-for="(item,index) in list"
               class="xs" :class="{'active':index===homeActive,'scale-in-center':moveIndex===index}"
               @click="move(index)"
          >
            <i class="iconfont" :class="item.icon"></i>
            <div class="tab-text">
              {{ item.content }}
            </div>
          </div>

        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {Toast} from "vant";
import Bubble from '../components/mini/Bubble'

export default {
  name: 'Home',
  components: {Bubble},
  computed: {
    ...mapState(['user', 'homeActive']),
    day() {
      let str = new Date().toISOString().slice(0, 10);
      let arr = str.split('-');
      str = arr[0] + '年' + arr[1] + '月' + arr[2] + '日';
      return str;
    },
    percent() {
      return this.user.drinkingWater / this.user.drinkingTarget;
    },
    isAndroid() {
      let u = navigator.userAgent;
      //android终端
      return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    }
  },
  mounted() {
    if (this.homeActive === -1 || this.homeActive === 0) {
      this.setHomeActive(0)
    } else {
      this.$router.push("/home/h" + (this.homeActive + 1))
    }
  },
  data() {
    return {
      list: [
        {icon: 'icon-beizi', content: '杯子', path: '/home/h1'},
        {icon: 'icon-jiankangshuju', content: '健康', path: '/home/h2'},
        {icon: 'icon-source', content: '资料', path: '/home/h3'},
        {icon: 'icon-shezhi', content: '设置', path: '/home/h4'}
      ],
      moveIndex: -1
    }
  },
  methods: {
    ...mapMutations(['setHomeActive']),
    move(index) {
      if (this.$route.path !== this.list[index].path) {
        this.moveIndex = index;
        this.$router.push(this.list[index].path);
        this.setHomeActive(index);
      }
    },
    click() {
      if (this.height === 1) {
        Toast({
          message: "今天的喝水任务完成了哦😯",
          duration: 1000
        })
      } else {
        Toast({
          message: "多喝水哦❤完成的时候可以进入某个区域️",
          duration: 1000
        })
      }
    }
  }
}
</script>

<style lang="less">

@keyframes shadow-inset-center {
  0% {
    background-color: @head-color;
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    background-color: @head-color2;
    box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
  }
}

@keyframes shadow-outset-center {
  100% {
    background-color: @head-color;
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  0% {
    background-color: @head-color2;
    box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
  }
}

.head-background {
  background-color: @head-color;
  border-radius: 0 0 0 35px;

  .head {
    padding: 36px 20px 20px 20px;

    .shadow-inset-center {
      background-color: @head-color2;
      animation: shadow-inset-center 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    }

    .shadow-outset-center {
      background-color: @head-color;
      animation: shadow-outset-center 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    }


    .user-info-card {
      border-radius: 20px;
      font-size: 15px;

      .divider {
        margin: auto;
      }

      .additional {
        margin: 0 10px;
        padding: 10px 0 10px 0;
        width: 40%;

        .profile-image-user {
          margin-top: 5%;
          margin-left: 13%;
          width: 67px;
          height: 67px;
          border-radius: 20px;
          border: #a8e5ee solid;
        }

        .level {
          color: #fff;
          text-align: center;
          text-transform: uppercase;
          font-size: 8px;
          font-weight: bold;
          background: rgba(0, 0, 0, 0.15);
          padding: 5px 7px;
          border-radius: 100px;
        }
      }

      .user-info-general {
        font-family: "Nunito", serif;
        padding: 20px;
        width: 100%;
        text-align: center;

        .info-title {
          font-family: ZCOOL, serif;
        }
      }

    }

  }

  .nav {
    align-items: center;
    justify-content: space-between;
  }

  .flex {
    display: flex;
  }
}

.tab-types {
  margin-top: 40px;
  justify-content: space-between;
  padding: 0 20px;
}

.tab-types {
  .iconfont {
    font-size: 24px;
    opacity: 0.6;
  }

  .active .iconfont {
    font-size: 26px;
    color: royalblue;
    opacity: 0.6;
  }

}

.per-ball {
  float: right;
  margin-right: 20px
}


.drink {
  margin-top: 20px;
  justify-content: space-between;
}

.total {
  opacity: 0.6;
  margin-bottom: 4px;
  font-size: 13px;
}

.drink-day {
  margin-left: 20px;
}

.drink .number {
  font-size: 20px;
  margin-left: 2px;
}

.iconfont.icon-gengduo {
  font-size: 30px;
  display: inline-block;
  width: 24px;
  height: 24px;
  opacity: 0.6;
}

.tab-text {
  font-family: ZCOOL, serif;
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
}

.active {
  position: relative;
}

.active .tab-text {
  color: royalblue;
  opacity: 1;
  position: relative;
}

.active::before {
  content: "";
  display: block;
  position: absolute;
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 30px 18px;
  left: -18px;
  top: -24px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  border-radius: 16px;
}

.active::after {
  content: "";
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #8292ac;
  border-radius: 50%;
  margin: 6px auto -16px auto;
}

.mini-btn {
  size: 10px;
}

// ===  scale-in-center
.scale-in-center {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

</style>
